<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Slides - Scrollbar</title>

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>

    <ion-content id="content">
      <ion-slides>
        <ion-slide>
          <h1>Default Slides</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>

      <ion-slides scrollbar>
        <ion-slide>
          <h1>Scrollbar</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>

      <ion-slides scrollbar class="scrollbar-visible">
        <ion-slide>
          <h1>Visible Scrollbar</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>

      <ion-slides scrollbar class="scrollbar-visible custom-scrollbar">
        <ion-slide>
          <h1>Custom Visible Scrollbar</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-app>

  <script>
    var scrollbarSlides = document.getElementsByClassName('scrollbar-visible');

    for (var i = 0; i < scrollbarSlides.length; i++) {
      scrollbarSlides[i].options = {
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: false
        }
      }
    }

  </script>

  <style>
    ion-slides {
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 20px;
    }

    ion-slide {
      height: 100px !important;
    }

    .custom-scrollbar {
      --scroll-bar-background: #ffb6c1;
      --scroll-bar-background-active: #ff6a80;
    }
  </style>
</body>

</html>
